<template>
    <div class="search">
        <div class="serachItem">
            <el-input v-model="serachVal" placeholder="搜索内容" />
            <el-button type="primary" icon="Search" plain round @click="serach">
                搜索
            </el-button>
        </div>
        <div class="addBtn">
            <el-button type="success" icon="Plus" @click="$emit('addBtn')">
                添加
            </el-button>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, defineEmits, defineExpose} from 'vue';

export default defineComponent({
  props: ['serachVal'],
  emits: ['addBtn', 'serach'],
  setup(props, { emit, attrs, slots }) {
      const data = reactive({
          serachVal: ''
      })
    //   传输搜索值
      const serach = () => {
        emit('serach', data.serachVal)
      }
      return {
          ...toRefs(data),
          serach
      };
  },
});
</script>

<style scoped>
.search {
    display: flex;
    justify-content: center;
    padding: 0 20px 15px 20px;
    border-bottom: 1px solid rgb(245, 245, 245);
}
.el-input {
    width: 20%;
}
.el-button {
    margin: 0 5px;
}
.serachItem {
    flex: 1;
}
</style>